<template>
    <div class="upload-photos">
        <div class="upload-photos-list">
            <div v-for="(item, index) in fileList" :key="index">
                <div class="upload-photos-item mr5 mb5" :style="{ width: mWidth, height: mHeight }">
                    <img class="upload-photos-item-img" :src="item.url" alt="" @click="chooseImg('edit', index)">
                    <div class="upload-opert-btn">
                        <span class="" @click="handlePictureCardPreview(index)">
                            <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="" @click="handleDownload(index)">
                            <i class="el-icon-download"></i>
                        </span>
                        <span v-if="!disabled" class="" @click="handleRemove(index)">
                            <i class="el-icon-delete"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="upload-photos-btn" :style="{ width: mWidth, height: mHeight }" v-if="fileList.length < limit && isUpload"
                @click="chooseImg('add', fileList.length)">
                <i class="el-icon-plus" style="font-size: 20px;"></i>
            </div>
        </div>
        <el-dialog class="preview-photos-dialog" :visible.sync="dialogVisible" width="500px" height="500px">
            <img style="height: 100%;width: 100%;object-fit: cover;" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps, defineEmits, defineExpose } from '@vue/composition-api'
import uploadPic from '@/js/upload/UploadPic.js'
import staticConst from '@/js/const/StaticConst.js'
import { generateRandom4Digits } from '@/utils/common.js'


const props = defineProps({
    isUpload: {
        type: Boolean,
        default: true
    },
    // 图片列表  list 只接受2个参数  url 和 name
    list: {
        type: Array,
        default: () => []
    },

    // 上传类型
    type: {
        type: Number,
        default: staticConst.UPLOAD_OTHER
    },
    // 是否支持多选文件
    multiple: {
        type: Boolean,
        default: false
    },
    // 最大允许上传个数
    limit: {
        type: Number,
        default: 10
    },
    // 接受上传的文件类型
    accept: {
        type: String,
        default: 'image/*'
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 文件大小限制(MB)
    maxSize: {
        type: Number,
        default: 2
    },
    idyun: {
        type: Number,
        default: -1
    },
    // 图片宽度
    mWidth: {
        type: String,
        default: '100px'
    },
    // 图片高度
    mHeight: {
        type: String,
        default: '100px'
    }
})

const emit = defineEmits(['update:list'])

// 先定义 fileList
const fileList = ref([])

// 然后设置 watch
watch(() => props.list, (newVal) => {
    if (newVal && newVal.length > 0) {
        fileList.value = [...newVal]
    } else {
        fileList.value = []
    }
}, { immediate: true, deep: true })

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const action = ref('#')
const headers = ref({})
const uploadData = ref({})

const url = ref('')
const chooseImg = (type, index) => {
    uploadPic.idyun = 'idyun'
    uploadPic.type = staticConst.UPLOAD_AVATAR
    uploadPic.uploadSussecc = uploadSuccess
    uploadPic.chooseImage1(callBack)
    function callBack(data) {
        url.value = data?.url
    }
    function uploadSuccess(data) {
        newUploadPicSuccess(data, type, index)
    }
}

const newUploadPicSuccess = (result, type, batchid) => {
    if (type == 'add') {
        fileList.value.push({
            url: result.url,
            name: result.name,
            id: generateRandom4Digits()
        })
        emit('update:list', fileList.value)
    } else if (type == 'edit') {
        fileList.value[batchid].url = result.url
        fileList.value[batchid].name = result.name
        emit('update:list', fileList.value)
    }
}

const handlePictureCardPreview = (index) => {
    dialogImageUrl.value = fileList.value[index].url
    dialogVisible.value = true
}

const handleRemove = (index) => {
    fileList.value.splice(index, 1)
    emit('update:list', fileList.value)
}

const handleDownload = (index) => {
    window.open(fileList.value[index].url, '_blank')
}

defineExpose({
    dialogImageUrl,
    dialogVisible,
    action,
    headers,
    uploadData
})
</script>

<style lang="scss" scoped>
.upload-photos {
    .upload-photos-list {
        display: flex;
        flex-wrap: wrap;
    }

    ::v-deep .el-dialog__header {
        margin-bottom: 0px !important;
        padding-top: 30px !important;
        // border-bottom: none !important;
    }

    .preview-photos-dialog {
        ::v-deep .el-icon-close:before {
            content: "\e6db" !important;
        }
        ::v-deep .el-dialog__body{
            padding-top: 20px !important;
        }
        ::v-deep .el-dialog__headerbtn{
            top: 12px;
            right: 12px;
        }
    }
}

.upload-photos-item {
    position: relative;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;

    &:hover {
        .upload-opert-btn {
            opacity: 1;
        }

        &::after {
            opacity: 0.5;
        }
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .upload-opert-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            cursor: pointer;
            color: #fff;
            font-size: 14px;
            transition: all 0.3s;

            &:hover {
                background-color: #409EFF;
            }
        }
    }

    .upload-photos-item-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.upload-photos-btn {
    box-sizing: border-box;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        border-color: #409EFF;

        .el-icon-plus {
            color: #409EFF;
        }
    }
}
</style>
